/**
 * 抢票主页
 * @email 626097912@qq.com
 * Created by dength on 2017/04/10
 * 
 */
import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Image,
    Platform,
    StatusBar,
    TouchableOpacity,
    Alert
} from 'react-native';
import Switch from 'react-native-switch-pro';
import Icon from 'react-native-vector-icons/FontAwesome';
import Constants from '../base/constants';
import CommonStyles from '../base/commonStyles';
import Esoterica from './customWindow/esoterica';
import { getNavigator } from '../route/route';
import Toast from '@remobile/react-native-toast';
import Loading from '../components/Loading';
import store from 'react-native-simple-store';
import moment from 'moment';

let Exhibition_DATE = 'MM月DD日';
let DATE_FORMAT = 'YYYY-MM-DD';
const currentDate = moment().format(Exhibition_DATE);//用于页面展示的日期
const keepDate = moment().format(DATE_FORMAT);//用于保存在本地的日期

class GrabTicket extends Component {
    constructor(props) {
        super(props);
        this.state = {
            values: true,
            showEsoterica: false,
            Qaddress: '请选择',
            Eaddress: '请选择',
            cfDate: currentDate,//页面显示的值
            isConvert: false,
            weeks: '今天'
        }
    }

    //跳转方法
    _onPress(navname) { getNavigator().push({ name: navname }); }

    /**
      * 事件：抢票秘笈弹出关闭
      */
    onOpenEsoterica() { this.setState({ showEsoterica: true }); }
    onCloseEsoterica() { this.setState({ showEsoterica: false }); }
    //出发，目的地切换
    _Swdestination() {
        let isShow = this.state.isConvert;
        this.setState({
            isConvert: !isShow,
        });
    }

    //格式化日历页面传递过来的参数
    componentDidMount() {
        store.get('TrainIndex')
            .then(TrainIndex => {
                if (TrainIndex.selectedDate != undefined) {
                    let selectedDate2 = Date.parse(new Date(TrainIndex.selectedDate)) / 1000;
                    var formatDate = this._timetrans(selectedDate2);
                    switch (new Date(TrainIndex.selectedDate).getDay()) {
                        case 0: weeks = "星期天"; break
                        case 1: weeks = "星期一"; break
                        case 2: weeks = "星期二"; break
                        case 3: weeks = "星期三"; break
                        case 4: weeks = "星期四"; break
                        case 5: weeks = "星期五"; break
                        case 6: weeks = "星期六"; break
                    }
                    this.setState({
                        weeks: weeks,
                        cfDate: formatDate,
                    });
                }
                if (TrainIndex.Thefirst != undefined && TrainIndex.End != undefined) {
                    this.setState({
                        Qaddress: TrainIndex.Thefirst,
                        Eaddress: TrainIndex.End,
                    });
                }
                if (this.state.cfDate === currentDate) {
                    //初始化首页的时候，默认把当日的时间保存下来，以便用户在没有选择日期的情况下能获取到日期
                    store.update('TrainIndex', {
                        selectedDate: keepDate
                    })
                }
            })
    }
    //格式化时间
    _timetrans(date) {
        var date = new Date(date * 1000);//如果date为10位不需要乘1000
        var Y = date.getFullYear() + '年';
        var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '月';
        var D = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate()) + '日';
        return M + D;
    }

    //立即抢票按钮
    _gorob() {
        let {Qaddress, Eaddress} = this.state;
        if (Qaddress === '请选择' || Eaddress === '请选择') {
            Alert.alert("温馨提示", "请选择出发地和目的地",[{ text: "确定", onPress: () => { } },]);
            return;
        }
        else {
            getNavigator().push({
                name: 'RtrainList',
                values: this.state.values
            })
        }
    }

    render() {
        let { showEsoterica, Qaddress, Eaddress, isConvert, cfDate, weeks} = this.state;
        return (
            <View style={styles.container}>
                <StatusBar
                    backgroundColor="#36353A"//F0F0F0
                    barStyle="light-content"
                    />
                <View style={styles.centerBox}>
                    <Image style={styles.Images} source={require('../images/ic_index_top.png')} />
                </View>
                <View style={styles.centerBox}>
                    <View style={styles.centerBox_bg}>
                        <View style={{ marginLeft: 15, marginRight: 15 }}>
                            <View style={[styles.centerBox_zc, { marginTop: 30, }]}>
                                <Text style={styles.centerBox_onetx}>
                                    出发地
                                </Text>
                                <Text style={styles.centerBox_onetx}>
                                    目的地
                                </Text>
                            </View>
                            <View style={[styles.centerBox_zc, { alignItems: 'center', height: 50, }, styles.centerBox_underline]}>
                                <TouchableOpacity
                                    activeOpacity={0.8}
                                    onPress={() => this._onPress('DepartureStation')}
                                    >
                                    <Text style={styles.centerBox_twotx}>
                                        {isConvert ? Eaddress : Qaddress}
                                    </Text>
                                </TouchableOpacity>
                                <TouchableOpacity
                                    activeOpacity={0.8}
                                    onPress={() => this._onPress('DepartureStation')}
                                    >
                                    <Text style={styles.centerBox_twotx}>
                                        {isConvert ? Qaddress : Eaddress}
                                    </Text>
                                </TouchableOpacity>
                                <TouchableOpacity
                                    onPress={this._Swdestination.bind(this)}
                                    activeOpacity={0.8}
                                    style={styles.qh_img}
                                    >
                                    <Image style={{ width: 30, height: 30 }} source={require('../images/ic_index_ change.png')} />
                                </TouchableOpacity>
                            </View>
                            <View style={[styles.centerBox_zc, { alignItems: 'center', height: 50, }, styles.centerBox_underline]}>
                                <View>
                                    <Text style={{ fontSize: 14, color: '#565656' }}>
                                        {cfDate}
                                    </Text>
                                </View>
                                <TouchableOpacity
                                    onPress={() => this._onPress('DepartureDate')}
                                    activeOpacity={0.8}
                                    style={{ flexDirection: 'row', justifyContent: 'center' }}>
                                    <Text style={{ fontSize: 14, color: '#A8A8A8', paddingRight: 10, paddingTop: 2 }}>
                                        {weeks}
                                    </Text>
                                    <Icon name="angle-right" size={22} color="#A8A8A8" />
                                </TouchableOpacity>
                            </View>
                            <View style={[styles.centerBox_zc, { alignItems: 'center', height: 50 }]}>
                                <View>
                                    <Text style={{ fontSize: 14, color: '#565656' }}>
                                        只查高铁动车
                                    </Text>
                                </View>
                                <View>
                                    <Switch
                                        width={50}
                                        height={26}
                                        backgroundActive={'#FF6600'}
                                        backgroundInactive={'#898989'}
                                        value={this.state.values}
                                        onSyncPress={value => this.setState({ values: value })}
                                        />
                                </View>
                            </View>
                            <TouchableOpacity
                                onPress={() => this._gorob()}
                                activeOpacity={0.8}
                                style={styles.buttom}>
                                <Text style={styles.buttom_text}>
                                    立即抢票
                                </Text>
                            </TouchableOpacity>
                            <View style={[styles.centerBox_zc, { marginTop: 20, marginLeft: 3, marginRight: 3 }]}>
                                <Text style={{ color: '#9E9E9E' }}>长沙南——株洲</Text>
                                <Text style={{ color: '#9E9E9E' }}>长沙南——深圳</Text>
                                <TouchableOpacity activeOpacity={0.8}>
                                    <Text style={{ color: '#9E9E9E' }}>删除历史</Text>
                                </TouchableOpacity>
                            </View>
                        </View>
                    </View>
                </View>
                <View style={{ position: 'absolute', bottom: 20, marginRight: 30, marginLeft: 30 }}>
                    <TouchableOpacity
                        onPress={this.onOpenEsoterica.bind(this)}
                        activeOpacity={0.8}
                        style={styles.buttom_Below}>
                        <Text style={{ color: '#FF6600' }}>抢票秘笈</Text>
                    </TouchableOpacity>
                    <TouchableOpacity
                        onPress={() => this._onPress('OrderList')}
                        activeOpacity={0.8}
                        style={[styles.buttom_Below, { position: 'absolute', left: (Constants.window.width - 60 - 50) / 2 + 50 }]}>
                        <Text style={{ color: '#FF6600' }}>我的车票</Text>
                    </TouchableOpacity>
                </View>
                <Esoterica
                    showEsoterica={showEsoterica}
                    onShowEsoterica={this.onOpenEsoterica.bind(this)}
                    onHideEsoterica={this.onCloseEsoterica.bind(this)}
                    />
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#F0F0F0',
        paddingTop: Platform.OS === 'ios' ? 20 : 0,
    },
    Images: {
        width: Constants.window.width - 30, height: 120
    },
    centerBox: {
        marginLeft: 15, marginRight: 15
    },
    centerBox_bg: {
        height: 350, backgroundColor: CommonStyles.colors.white, borderRadius: 10,
    },
    centerBox_zc: {
        flexDirection: 'row', justifyContent: 'space-between',
    },
    centerBox_onetx: {
        fontSize: 14, color: '#A1A1A1'
    },
    centerBox_twotx: {
        fontSize: 18, color: '#575757', fontWeight: 'bold'
    },
    centerBox_underline: {
        borderBottomColor: '#F2F2F2', borderBottomWidth: 1
    },
    buttom: {
        height: 40, backgroundColor: '#FF6600', alignItems: 'center', justifyContent: 'center',
        borderRadius: 10, marginTop: 30
    },
    buttom_text: {
        color: CommonStyles.colors.white, fontSize: 16
    },
    buttom_Below: {
        height: 40, borderColor: '#FF6600', borderWidth: 1, alignItems: 'center', justifyContent: 'center',
        borderRadius: 10, width: (Constants.window.width - 60 - 50) / 2
    },
    qh_img: {
        position: 'absolute', left: (Constants.window.width - 60 - 20) / 2, top: (50 - 30) / 2
    }

});

export default GrabTicket;